<script setup lang="ts">
interface CustomStyle {
  backgroundColor?: string;
  height?: string;
  width?: string;
  borderRadius?: string;
  borderColor?: string;
}

withDefaults(
  defineProps<{
    title?: string;
    transparent?: boolean;
    border?: boolean;
    customStyle?: CustomStyle;
    forbid?: boolean;
    thin?: boolean;
    delay?: number;
  }>(),
  {
    title: "立即申请",
    transparent: false,
    border: true,
    customStyle: () => ({
      backgroundColor: "var(--main-color)",
      height: "88rpx",
      width: "100%",
      borderRadius: "8rpx",
      borderColor: "var(--main-color)",
    }),
    forbid: false,
    thin: false,
    delay: 0,
  },
);

defineEmits<{
  (e: "handleClick"): void;
}>();

const forbidStyle = {
  backgroundColor: "#f6f6f6",
  height: "88rpx",
  width: "100%",
  borderRadius: "8rpx",
  borderColor: "#f6f6f6",
  color: "#a0a0a0",
};
</script>

<template>
  <view
    :class="{
      '!bg-transparent': transparent,
      'border-t-[1rpx] border-solid': border,
    }"
    class="footer-btn faded-in bottom-0 left-0 z-40 box-border w-full border-[#E5E5E5] bg-white px-[30rpx] pt-[20rpx] pb-[env(safe-area-inset-bottom)]"
    :style="[
      thin
        ? 'padding-bottom: calc(10rpx + env(safe-area-inset-bottom)); padding-top: 10rpx'
        : '',
      {
        '--delay': `${delay}s`,
      },
    ]"
  >
    <view class="flex h-fit w-full items-center justify-center">
      <slot>
        <uv-button
          type="primary"
          :customTextStyle="{ fontSize: '32rpx', fontWeight: '600' }"
          :customStyle="forbid ? forbidStyle : customStyle"
          @click="$emit('handleClick')"
        >
          {{ title }}
        </uv-button>
      </slot>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.footer-btn {
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
</style>
